import React,{Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Modal,
    StatusBar,
    FlatList,
    Image,
    TouchableWithoutFeedback,
    ActivityIndicator
} from 'react-native';
import request from '../request/request';
import Header from './header/Header';
import Gallery from 'react-native-image-gallery';
import Loading from 'react-native-lindf-loading';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
export default class MyOrder extends Component{
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            hasData: true,
            // 控制下拉加载状态
            isLoading: 0,
            // 控制下拉刷新
            isLoad: false,
            topImage: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
            newsList: [
                {
                    id: 1,
                    time: '2018-03-30 15:30',
                    lists: [
                        {
                            id: 2,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 5,
                            price: 100.00,
                        }
                    ]
                },
                {
                    id: 2,
                    time: '2018-03-30 15:30',
                    lists: [
                        {
                            id: 3,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 3,
                            price: 50.00,
                        },
                        {
                            id: 4,
                            thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                            content: '这是标题这是标题这是标题这是标题题这是标题这是标题题',
                            specs: '颜色：黑色',
                            number: 1,
                            price: 200.00,
                        }
                    ]
                }
            ],
            isModal: false,

        };
    }
    componentWillMount(){
        // fetch('https://result.eolinker.com/XPZsElz98c92f9c243e2f760bf17420ef24906430bea331?uri=lindf.com',
        //     {
        //         method: 'POST',
        //     }
        // )
        // .then((response) => response.json())        // json方式解析，如果是text就是 response.text()
        // .then((responseData) => {   // 获取到的数据处理
        //     this.setState({
        //         newsList: responseData.result.lists,
        //     },function(){
        //         this.setState({
        //             hasData: true
        //         })
        //         console.log(this.state.newsList)
        //     });

        // })
        // .catch((error) => {     // 错误处理
        //     alert(error);
        // })
        // .done();
        
        // request(
        //     'POST', 
        //     '', 
        //     (data)=>{
        //         this.setState({
        //             newsList: data.result.lists,
        //         },function(){
        //             this.setState({
        //                 hasData: true,
        //                 showModal: false
        //             })
        //         });
        //         console.log(data.result);
        //     }
        //     ,
        //     (error)=>{
        //         console.log(error);
        //     }
        // );
    }

    _onRefresh(){
        console.log('下拉刷新')
        this.setState({
            isLoad: !this.state.isLoad
        },function(){
            // 请求数据
            setTimeout(()=>{
                this.setState({
                    isLoad: !this.state.isLoad
                });
            },5000)
        });
        
    }

    _onEndReached(){
        // 如果页面刚进去触发了这函数，代表不满屏，不触发表示满屏
        console.log('触发了')
    }

    // 底部上拉加载状态
    _bottomComponent(){
        if(this.state.isLoading==0){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>点击加载更多</Text>
                </View>
            )
        }else if(this.state.isLoading==1){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>加载中...</Text>
                </View>
            )
        }else if(this.state.isLoading==2){
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{lineHeight: 30}}>暂无数据</Text>
                </View>
            )
        }
    }

    // 是否显示预览
    _isModal(){
        this.setState({
            isModal: false
        });
    }

    // 关闭等待框
    _onRequestClose() {
        this.setState({
            showModal: false
        });
    }

    _tabChoose(){
        let _this = this;
        this.setState({
            showModal: true
        },function(){
            setTimeout(()=>{
                _this.setState({
                    showModal: false
                })
            },2000);
        });
    }

    render(){
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fff'
            }}>
                <Header isShowBack={true} title='商品收藏' goBack={goBack} />

                <FlatList
                    tabLabel='未付款'
                    extraData={this.state}
                    initialNumToRender={10}
                    data={this.state.newsList}
                    style={{backgroundColor: '#eee'}}
                    // 给数组的每一项指定key，避免不必要的render
                    keyExtractor={(item, index) => item.id}
                    // 设置下拉刷新功能的状态
                    refreshing={ this.state.isLoad }
                    // 头部组件
                    // ListHeaderComponent={this._headerComponent}
                    // 尾部组件
                    ListFooterComponent={this._bottomComponent.bind(this)}
                    // 给组件设置下拉刷新功能
                    onRefresh={this._onRefresh.bind(this)}
                    // onEndReachedThreshold={0.01}
                    // onEndReached={this._onEndReached.bind(this)}
                    // 渲染数组组件
                    renderItem={({item}) => {
                        return (
                            this.state.hasData?
                            <TouchableWithoutFeedback>
                                <View style={{backgroundColor: '#fff',paddingLeft: 15,paddingRight: 10}}>
                                    <View style={{ flexDirection: 'row',borderBottomWidth: 1, borderColor: '#eeeeee', paddingTop: 15,paddingBottom: 15}}>
                                        <View style={{width: '42%'}}>
                                            <Image style={{
                                                width: '100%',
                                                height: 87,
                                                borderRadius: 5,
                                            }} source={{uri: this.state.topImage}} />
                                        </View>
                                        <View style={{flex: 1, justifyContent: 'space-between',paddingLeft: 10}}>
                                            <Text numberOfLines={3} style={{fontSize: 13, color: '#707070',lineHeight: 17}}>商品名商品名商品名商品名商品商品名商品名商品名商品名</Text>   
                                            <View style={{flexDirection: 'row'}}>
                                                <Text style={{fontSize: 12, color: '#707070',lineHeight: 17}}>2018-03-25 15:30</Text>
                                            </View> 
                                        </View>
                                    </View>
                                </View>
                            </TouchableWithoutFeedback>
                            :
                            null
                        )
                    }}
                />          
            </View>
        )
    }
}

const styles = StyleSheet.create({
    itemChild: {height: 92, paddingLeft: 8, paddingTop: 8, paddingBottom: 8, borderBottomWidth: 1, borderColor: '#eee', backgroundColor: '#ffffff', flexDirection: 'row'},
    itemChildTopText: {width: 11, height: 11, alignItems: 'center', backgroundColor: '#0048c2', borderRadius: 100},
    itemChildTopTextActiveColor: {backgroundColor: '#0048c2'},
    itemChildTopTextColor: {backgroundColor: '#b6b6b6'},
    itemChildCenter: {width: 85, height: 75,marginRight: 10},
    itemChildCenterImg: {width: 85, height: 75},
    itemChildBottom: {flex: 1, paddingRight: 12, justifyContent: 'space-between'},
    itemChildBottomText: {fontSize: 13, color: '#3a3a3a'},
    itemChildBottomBox: {flexDirection: 'row', justifyContent: 'space-between'},
    itemChildBottomBoxText: {fontSize: 11, color: '#828282'},
    itemChildBottomBoxPrice: {fontSize: 12, color: '#fd0408'},
    itemChildNext: {height: 38, paddingTop: 6, paddingBottom: 6, backgroundColor: '#fff', borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'flex-end'},
    itemChildNextView: {minWidth: 65, borderWidth: 1, borderColor: '#1154c6', borderRadius: 20, justifyContent: 'center', alignItems: 'center', marginRight: 10},
    itemChildNextViewText: {fontSize: 12, color: '#464646'},
    itemChildtotal: {alignItems: 'center'},
    itemChildtotalView: {marginRight: 10},
    itemChildtotalViewText: {fontSize: 13, color: '#737373'},
})